<template>
    <div class="contentDiv">
        <div class="filter">
            <filter-component
                @getTableData="getTableData"
                @getFilter="getFilter"
                getPageFilterUrl="/api/menu/GetPageFilter"
                getPageDataUrl="/api/menu/GetPageData"
                ref="filterRef"
            />
        </div>
        <div class="options">
            <el-row class="mb-4">
                <el-button type="success" size="small" @click="handleAddNew">新增</el-button>
            </el-row>
        </div>
        <div class="dataList">
            <ListTable
            :filters="dataMap.filterArr" 
            :tableData="dataMap.finalTableData" 
            :displaySelection="dataMap.displaySelection"
            :expandAll="dataMap.expandAll"
            :isBorder="dataMap.isBorder"
            ref="dataListRef"
            @tableHandleFun1="tableHandleFun1"
            @tableHandleFun2="tableHandleFun2"
            @tableHandleFun3="tableHandleFun3"
            />
        </div>
    </div>
    <dialog-form 
    :filters="dataMap.filterArr" 
    :vModel="dataMap.addNewVisible" 
    :currentFormData="dataMap.currentFormData"
    titleText="新增菜单"
    closeDialogFunc="closeAddNewDialog"
    getDialogDataFunc="getAddNewDialogData"
    @closeAddNewDialog="closeAddNewDialog"
    @getAddNewDialogData="getAddNewDialogData"
    />
    <dialog-form 
    :filters="dataMap.filterArr" 
    :vModel="dataMap.editDialogVisiable" 
    :currentFormData="dataMap.currentFormData"
    titleText="编辑菜单"
    closeDialogFunc="closeEditMenuDialog"
    getDialogDataFunc="getEditMenuDialogData"
    @closeEditMenuDialog="closeEditMenuDialog"
    @getEditMenuDialogData="getEditMenuDialogData"
    />
</template>

<script setup>
import {reactive,ref} from 'vue';
import httpTool from '../../httpRequest';
import FilterComponent from '../../components/Filter.vue';
import ListTable from '../../components/ListTable.vue';
import DialogForm from '../../components/DialogForm.vue';
import { ElMessage,ElMessageBox  } from 'element-plus'
import { getTree } from '../../util/common';

let dataMap = reactive({
    filterArr:{},
    finalTableData:{},
    addNewVisible:false,
    editDialogVisiable:false,
    currentFormData:{},
    displaySelection:false,
    expandAll:false,
    isBorder:true,
});

const filterRef = ref(null);
const dataListRef = ref(null);

const getTableData = (data)=>{
    //处理一下数据，再提交给模板
    dataMap.finalTableData = getTree(data.tableData,'id','menu_pid')
}
const getFilter = (data)=>{
    dataMap.filterArr = data
}


//新增
const handleAddNew = ()=>{
    dataMap.currentFormData = {};
    dataMap.addNewVisible = true;
}
//关闭新增对话框
const closeAddNewDialog = (status)=>{
    dataMap.addNewVisible = status;
}
//关闭编辑对话框
const closeEditMenuDialog = (status)=>{
    dataMap.editDialogVisiable = status;
}
//提交新增表单
const getAddNewDialogData = (formData)=>{
    httpTool.post('/api/menu/SaveMenu',formData).then(response=>{
        if(response.code == '200'){
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            dataMap.addNewVisible = false;
            filterRef.value.doSearch()
        }
    }).catch(error=>{

    })
}
//编辑
const tableHandleFun1 = (row)=>{
    if(!row){
        ElMessage({
            message: '记录不存在',
            type: 'warning',
        })
        return false;
    }
    //获取菜单信息
    httpTool.post('/api/menu/GetMenuInfoById',{id:row.id}).then(response=>{
        if(response.code == '200'){
            dataMap.filterArr.menu_pid.listData = response.data.allMenus;
            dataMap.currentFormData = response.data.menuInfo;
            dataMap.editDialogVisiable = true;
        }
    }).catch(error=>{

    })
}
//禁用
const tableHandleFun2 = (row)=>{
    if(!row){
        ElMessage({
            message: '记录不存在',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '是否禁用选中的菜单？，如果是父级菜单，对应的子菜单也一并会禁用',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        httpTool.post('/api/menu/ChangeMenuStatus',{id:row.id,status:2}).then(response=>{
            if(response.code == '200'){
                ElMessage({
                    message: response.msg,
                    type: 'success',
                })
                filterRef.value.doSearch()
            }
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}
//启用
const tableHandleFun3 = (row)=>{
    if(!row){
        ElMessage({
            message: '记录不存在',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '是否启用选中的菜单？，如果是父级菜单，对应的子菜单也一并会启用',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        httpTool.post('/api/menu/ChangeMenuStatus',{id:row.id,status:1}).then(response=>{
            if(response.code == '200'){m
                ElMessage({
                    message: response.msg,
                    type: 'success',
                })
                filterRef.value.doSearch()
            }
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}
//提交编辑表单
const getEditMenuDialogData = (formData)=>{
    httpTool.post('/api/menu/SaveMenu',formData).then(response=>{
        if(response.code == '200'){
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            dataMap.editDialogVisiable = false;
            filterRef.value.doSearch()
        }
    }).catch(error=>{

    })
}
</script>

<style scoped>
</style>